<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>可编辑文件列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
	href="${base}/css/jquery.searchableSelect.css">
<script type="text/javascript" src="${base}/js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="${base}/js/bootstrap.js"></script>
<script type="text/javascript"
	src="${base}/js/jquery.searchableSelect.js"></script>


<script>
/* function checkName(data){
    alert(342423);
    var values="";
    $(".se").each(function(i,item){
        var value=$(this).val();
   
        values+=value; //获取所有的名称
    });
    var val=$(data).val(); //获得当前输入框的值
    alert(val);
    var newValue=values.replace(val,""); //去除当前输入框的值
    if(newValue==""){
        return false;
    }else{
        if(newValue.indexOf(val)>-1){  //当前值和newValue作比较
            alert("名称已存在，请重新输入!");
            $(data).val("");
        }
    }
 } */
</script>

</head>

<body>
	<!--整体div-->
	<div class="container">
		<jsp:include page="${path}/menu.jsp"></jsp:include>


		<div class="col-md-8"
			style="background: #fff; padding: 40px 80px; margin: 30px; border: 7px solid #ccc;">
			<font class="create"><input type="button"
				class="btn btn-primary" id="regBut" width="100" value="创建项目"></font>
			<form class="form-horizontal" style="margin-top: 5px;"
				action="${ pageContext.request.contextPath }/project/createProject"
				method="post">
				

				<div class="form-group">
					<label for="projectName" class="col-sm-2 control-label">项目名称</label>
					<div class="col-sm-5">
						<input type="text" class="form-control" id="projectName"
							name="projectName" placeholder="请输入项目名称">
					</div>
					<span id="s1"></span>

				</div>

				<div class="form-group">
					<label for="managerName" class="col-sm-2 control-label">项目经理</label>
					<div class="col-sm-5">
						<select id="managerName" name="managerName" class="se">
								<option value="">请选择或者输入成员姓名</option>
								<c:forEach items="${users}" var="user">
									<option value="${user.name }">${user.name }</option>
								</c:forEach>
							</select>
					</div>
				</div>



				<div id="addCol">
					
					<div class="form-group">
						<label for="memberName1" class="col-sm-2 control-label">项目成员1</label>
						<div class="col-sm-6">
							<select id="memberName1"    name="memberName1" class="se" >
								<option value="">请选择或者输入成员姓名</option>
								<c:forEach items="${users}" var="user">
									<option value="${user.name }">${user.name }</option>
								</c:forEach>
							</select>
						</div>
						<div id="d1"
							style="display: none; position: absolute; top: 120px; left: 440px; border: 1px solid gray; width: 400px; height: 200px;"></div>
					</div>

				</div>



				<input type="button" class="btn btn-primary" onclick="add(id++)"
					style="width: 300px" value="再添加一个成员">

				<div class="form-group">
					<br>
					<div class="col-sm-offset-2 col-sm-10">
						<input type="submit" class="btn btn-primary" id="createProject"
							width="100" value="创建项目">
					</div>
				</div>
			</form>
		</div>
	</div>

	<script>
	$('select').searchableSelect({  
        afterSelectItem: function(){  
         /*    alert(this.holder.text()); 
        		alert(this.holder.data("value"));*/  
            var values="";
            $(".se").each(function(i,item){
                var value=$(this).val();
               
                values+=value; //获取所有的名称
            });
            var val=this.holder.text();
            var newValue=values.replace(val,""); //去除当前输入框的值
            if(newValue==""){
                return false;
            }else{
         	
                if(newValue.charAt(newValue.indexOf(val))!=""){ //当前值和newValue作比较
                    alert("该成员已添加，请重新输入!");
                    this.holder.html("请选择或输入成员姓名");
                }
            }
            
        }   
    });  
		function add(id) {
			id = id + 2;

			$("#addCol")
					.append(
							'<div class="form-group"><label for="memberName'+id+'" class="col-sm-2 control-label">项目成员'
									+ id
									+ '</label><div class="col-sm-6">'
									+ '<select  class="se" id="memberName' + id + '" name="memberName' + id + '"><option value="">请选择或者输入成员姓名</option><c:forEach items="${users}" var="user"><option value="${user.name }">${user.name }</option></c:forEach></select>'
									+ '</div><div id="d1" style="display: none; position: absolute; top: 120px; left: 440px; border: 1px solid gray; width: 400px; height: 200px;"></div></div>');

			
		             
			
			
			
			$("#memberName" + id).searchableSelect({  
		        afterSelectItem: function(){  
		            /*    alert(this.holder.text()); 
		           		alert(this.holder.data("value"));*/  
		               var values="";
		               $(".se").each(function(i,item){
		                   var value=$(this).val();
		                  
		                   values+=value; //获取所有的名称
		               });
		               var val=this.holder.text();
		               var newValue=values.replace(val,""); //去除当前输入框的值
		               if(newValue==""){
		                   return false;
		               }else{
		            	
		                   if(newValue.charAt(newValue.indexOf(val))!=""){ //当前值和newValue作比较
		                       alert("该成员已添加，请重新输入!");
		                       this.holder.html("请选择或输入成员姓名");
		                   }
		               }
		               
		           }  
		       });  
			
	
		}
		//可用searchableSelect()做可搜索下拉框。。。
		var TempArr = []; //存储option  
		$(function() {

			$("#typenum option").each(function(index, el) {
				TempArr[index] = $(this).text();
			});
			$(document)
					.bind(
							'click',
							function(e) {
								var e = e || window.event; //浏览器兼容性     
								var elem = e.target || e.srcElement;
								while (elem) { //循环判断至跟节点，防止点击的是div子元素     
									if (elem.id
											&& (elem.id == 'typenum' || elem.id == "makeupCo")) {
										return;
									}
									elem = elem.parentNode;
								}
								$('#typenum').css('display', 'none'); //点击的不是div或其子元素     
							});
			// 为文本框绑定事件:
			$("#memberName1").keyup(function() {
				// 获得文本框的值:
				var word = $(this).val();
				// 异步发送请求:
				if (word != "") {
					$.post("/tpl/getUserByWord", {
						"word" : word
					}, function(data) {
						alert(data);
						$("#d1").show().html(data);
					});
				} else {
					$("#d1").hide();
				}
			});

			$("#projectName")
					.blur(
							function() {
								var $value = $(this).val();

								if ($value != "") {
									$
											.post(
													"${ pageContext.request.contextPath }/project/checkProjectName",
													{
														"projectName" : $value
													},
													function(data) {
														if (data == 1) {
															$("#s1")
																	.html(
																			"<font color='green'>该项目名可以使用</font>");
															$("#createProject")
																	.attr(
																			"disabled",
																			false);
														} else if (data == 2) {
															$("#s1")
																	.html(
																			"<font color='red'>该项目已经被创建</font>");
															$("#createProject")
																	.attr(
																			"disabled",
																			true);
														}
													});
								} else {
									$("#s1")
											.html(
													"<font color='red'>项目名称不能为空</font>");
									$("#createProject").attr("disabled", true);
								}
							});
		});

	
	</script>
</body>

</html>


